<template>
  <div>
    <div class="header" v-if="showHeader">
      <div
        class="header-content"
        :style="{ width: proxy.globalInfo.bodyWidth + 'px' }"
      >
        <!--logo-->
        <router-link to="/" class="logo">
          <span
            v-for="(item, index) in logoInfo"
            :key="index"
            :style="{ color: item.color }"
          >
            {{ item.letter }}
          </span>
        </router-link>

        <!--板块信息-->
        <div class="menu-panel"></div>
        <!--导航栏和搜索框-->
        <div class="nav-buttons">
          <el-button text @click="goToHome">首页</el-button>
          <el-button text @click="goToTags">标签</el-button>
        </div>

        <div class="search-panel">
          <el-input
            v-model="searchText"
            placeholder="搜索"
            prefix-icon="el-icon-search"
            class="search-input"
            @keyup.enter="triggerSearch"
          >
           
          </el-input>
        </div>

        <!--登录注册信息-->
        <div class="user-info-panel">
          <!--显示用户信息-->
          <template v-if="userInfo.id">
            <div class="user-info">
              <el-dropdown>
                <avatar
                  :url="userInfo.image"
                  :width="50"
                  :addLink="false"
                  :userId="userInfo.id+''"
                ></avatar>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="gotoUcenter"
                      >我的主页</el-dropdown-item
                    >
                    <el-dropdown-item @click="gotoAdminPage"
                      >后台管理</el-dropdown-item
                    >
                    <el-dropdown-item @click="logout">退出</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>

          <el-button-group :style="{ 'margin-left': '20px' }" v-else>
            <el-button type="primary" plain @click="login">登录</el-button
            >
            <el-button type="primary" plain @click="register">注册</el-button
            >
          </el-button-group>
        </div>
      </div>
    </div>

    <div class="body-container" style="display: flex;justify-content: center;">
      <router-view :searchText="text"/>
      <el-aside style="margin-left: 10px;width: 300px;box-sizing: border-box;overflow: hidden !important;" >
         <Aside @open="open"></Aside>
      </el-aside>
    </div>

    <!--底部导航-->


    <div class="footer">
      <div
        class="footer-content"
        :style="{ width: proxy.globalInfo.bodyWidth + 'px' }"
      >
        <el-row>
          <el-col :span="6" class="item">
            <div class="logo">
              <div class="logo-letter">
                <span
                  v-for="(item, index) in logoInfo"
                  :key="index"
                  :style="{ color: item.color }"
                  >{{ item.letter }}</span
                >
              </div>
              <div class="info">传播技术分享知识</div>
            </div>
          </el-col>
          <el-col :span="6" class="item">
            <div class="title">网站相关</div>
            <div>
              <a href="####">网站相关</a>
            </div>
            <div><a href="####">网站相关</a></div>
            <div><a href="####">网站相关</a></div>
          </el-col>
          <el-col :span="6" class="item">
            <div class="title">友情网站</div>
          </el-col>
          <el-col :span="6" class="item">
            <div class="title">联系管理员</div>
            <div class="title">admin@qq.com</div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!--登录和注册-->
    <LoginAndRegister :showRegister="showRegister" :showLogin="showLogin" @close="close"></LoginAndRegister>
    <!--回到顶部-->
    <el-backtop :right="100" :bottom="100"></el-backtop>
  </div>
</template>

<script setup>
import LoginAndRegister from "./LoginAndRegister.vue";
import Aside from "@/views/forum/Aside.vue"
import {
  ref,
  reactive,
  getCurrentInstance,
  registerRuntimeCompiler,
  watch,
  onMounted,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";

const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const store = useStore();
const logoInfo = ref([
  { letter: "T", color: "#3285FF" },
  { letter: "e", color: "#FB3624" },
  { letter: "c", color: "#FFBA02" },
  { letter: "h", color: "#3285FF" },
  { letter: "T", color: "#25B24E" },
  { letter: "a", color: "#FD3224" },
  { letter: "l", color: "#FFBA02" },
  { letter: "e", color: "#3285FF" },
  { letter: "s", color: "#FB3624" },
]);

const searchText = ref("");
const showHeader = ref(true);
const showRegister= ref(false)
const showLogin= ref(false)

const path =ref("")
watch(
  () => router.currentRoute.value.path,
  (newValue, oldValue) => {
    path.value=newValue

  },
  { immediate: true }
);
onMounted(() => {
 
});
const open=()=>{
  login()
}
const register =()=>{
  showRegister.value=true
  showLogin.value=false
}
const login=()=>{
  showRegister.value=false
  showLogin.value=true
}
//监听 登录用户信息
const userInfo = ref({});
watch(
  () => store.state.loginUserInfo,
  (newVal, oldVal) => {
    if (newVal != undefined && newVal != null) {
      userInfo.value = newVal;
    } else {
      userInfo.value = {};
    }
  },
  { immediate: true, deep: true }
);
const goToHome = () => {
  router.push("/");
};

const goToTags = () => {
  router.push("/tags");
};

const currentPage = ref(1); // 当前页码
const pageSize = ref(10); // 每页显示条目数
const totalItems = ref(100); // 总条目数，需要根据实际情况设置

const handlePageChange = (newPage) => {
  // 处理页码变化的方法，可以在这里更新数据或者进行其他操作
  currentPage.value = newPage;
};

const text =ref("")
const triggerSearch = () => {
  if(path.value !="/"){
    router.push("/")
  }
 text.value =  searchText.value
   
};
const gotoUcenter=()=>{
   router.push("/my")
}
const gotoAdminPage=()=>{
  router.push("/admin")//加一下后台管理页面
}
const close=()=>{
   showLogin.value=false
   showRegister.value=false
}
const logout=()=>{
   localStorage.removeItem("userInfo")
   localStorage.removeItem("token")

   setTimeout(() => {
    history.go(0)
   }, 100);
   router.push("/") 
  
}
</script>

<style lang="scss">
.header {
  top: 0px;
  width: 100%;
  position: fixed;
  box-shadow: 0 2px 6px 0 #ddd; //导航栏阴影
  z-index: 1000;
  background: #fff;
  .header-content {
    margin: 0px auto;
    align-items: center;
    height: 60px;
    display: flex;
    align-items: center;
    .logo {
      display: block;
      text-decoration: none;
      margin-right: 5px;
      span {
        font-size: 35px;
      }
    }
    .menu-panel {
      display: flex;
      justify-content: space-around;
      margin-bottom: 20px;
      flex-grow: 1;
    }
    .nav-buttongs {
      display: flex;
      align-items: center;
      margin-right: auto;
    }
    .search-panel {
      flex-grow: 2;
      display: flex;
      justify-content: center;

      .el-input {
        width: 300px;
      }
    }
    .user-info-panel {
      width: 300px;
      display: flex;
      align-items: center;
     justify-content: flex-end;
      .op-btn {
        .iconfont {
          margin-left: 5px;
        }
        .el-button + .el-button {
          margin-left: 5px;
        }
      }
    }
  }
}
.body-container {
  margin-top: 60px;
  position: relative;
  min-height: calc(100vh - 210px);

}

.footer {
  background: #e9e9e9;
  height: 140px;
  margin-top: 10px;
  .footer-content {
    margin: 0px auto;
    padding-top: 10px;
    .item {
      text-align: left;
      .title {
        font-size: 18px;
        margin-bottom: 10px;
      }
      a {
        font-size: 14px;
        text-decoration: none;
        color: var(--text2);
        line-height: 25px;
      }
    }
    .logo {
      .logo-letter {
        font-size: 30px;
      }
      .info {
        margin-top: 10px;
        color: rgb(93, 91, 91);
      }
    }
  }
}
</style>